<template>
    <div>
        <div class="toplist">
            <div class="item" v-for="(item,index) in toplists" :key="index" >
                <div class="a" @click="getRankTop(item.id)">
                    <div class="img">
                        <img :src="item.coverImgUrl" alt="">
                    </div>
                    <ul >
                        <li v-for="(key,i) in item.getTopListsDetail" :key = "i">{{i+1}}.{{key.name}}--{{key.ar[0].name}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import{getToplist,getTopListsDetail}from "../api/rank"
    export default {
        data() {
            return {
                toplists:"",
            }
        },
        // 组件路由最早钩子
        beforeRouteEnter (to, from, next) {
            // 获取分类数据
            getToplist({limit:10}).then(data=>{
                // next();//跳转路由
                // vm.getTopListsDetailFun()指定methods静态方法
                next(vm => vm.getTopListsDetailFun(data.list))
            })
        },
        methods: {
            getTopListsDetailFun(toplistsData){
                this.toplists = toplistsData;
                for(let item in toplistsData){
                    getTopListsDetail({id:toplistsData[item].id}).then(data=>{
                        if(data.playlist.tracks.length){
                            this.$set(this.toplists[item],"getTopListsDetail",data.playlist.tracks.slice(0,3))
                        }
                    })
                }
            },
            getRankTop(id){
                console.log("11",id);
                this.$router.push({
                    path:"/rank/musicRank",
                    query:{
                        id
                    }
                })
            },
        },
    }
</script>

<style lang="less" scoped>
    .toplist{
        padding: 15px;
        .item{
            padding: 4px 0px ;
            border-bottom: 2px solid #e3e4e4;
            .a{
                display: flex;
                .img{
                    flex: 0 0 154px;
                    height: 154px;
                    background-color: coral;
                    img{
                        width: 100%;
                    }
                }
                ul{
                    padding-top: 10px;
                    flex: 1;
                    overflow: hidden;
                    width: 470px;
                    height: 100%;
                    li{
                        font-size: 20px;
                        color: #030006;
                        line-height: 46px;
                        text-indent: 30px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
        }
    }
</style>